<template>
  <div class="class-history-container">
    <!-- 筛选组件 -->
    <HistoryFilter
      :course-types="courseTypes"
      :status-options="statusOptions"
      class="history-filter"
      @filter-change="handleFilterChange"
    />

    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <StatsCard
            :number="stats.total"
            label="总课程数"
            icon="fa-graduation-cap"
            color="#409eff"
          />
        </el-col>
        <el-col :span="6">
          <StatsCard
            :number="stats.completed"
            label="已完成"
            icon="fa-check-circle"
            color="#67c23a"
          />
        </el-col>
        <el-col :span="6">
          <StatsCard
            :number="stats.cancelled"
            label="已取消"
            icon="fa-times-circle"
            color="#f56c6c"
          />
        </el-col>
        <el-col :span="6">
          <StatsCard
            :number="stats.averageScore"
            label="平均评分"
            icon="fa-star"
            color="#e6a23c"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 历史记录表格组件 -->
    <HistoryTable
      :data="classHistory"
      :loading="loading"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @view-detail="handleViewDetails"
    />

    <!-- 课程详情对话框组件 -->
    <ClassDetailDialog
      :visible.sync="showDetailDialog"
      :class-info="selectedClass"
      @close="handleDialogClose"
      @export-record="handleExportClassRecord"
    />
  </div>
</template>

<script>
import HistoryFilter from './component/HistoryFilter.vue'
import StatsCard from './component/StatsCard.vue'
import HistoryTable from './component/HistoryTable.vue'
import ClassDetailDialog from './component/ClassDetailDialog.vue'
import { classStatic, pullClassHistory } from '@/api/wordSystemCourse'

export default {
  name: 'ClassHistory',
  components: {
    HistoryFilter,
    StatsCard,
    HistoryTable,
    ClassDetailDialog
  },
  data() {
    return {
      // 筛选条件
      filterParams: {
        selectedCourseType: '',
        selectedStatus: '',
        dateRange: [],
        searchKeyword: ''
      },

      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,

      // 课程类型选项
      courseTypes: [
        { label: '理论课', value: '理论课' },
        { label: '实践课', value: '实践课' },
        { label: '实验课', value: '实验课' },
        { label: '讨论课', value: '讨论课' },
        { label: '讲座', value: '讲座' }
      ],

      // 状态选项
      statusOptions: [
        { label: '已完成', value: '已完成' },
        { label: '已取消', value: '已取消' },
        { label: '迟到', value: '迟到' },
        { label: '早退', value: '早退' }
      ],

      // 所有课程历史数据
      classHistory: [],

      // 加载状态
      loading: false,

      // 详情对话框
      showDetailDialog: false,
      selectedClass: null,

      // 统计数据
      stats: {
        total: 0,
        completed: 0,
        cancelled: 0,
        averageScore: 0
      }
    }
  },
  mounted() {
    // 加载课程历史数据
    this.loadClassHistory()
    this.loadStatic()
  },

  methods: {
    // 加载课程历史数据
    async loadClassHistory() {
      this.loading = true

      const res = await pullClassHistory({
        page: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },
        param: {}
      })

      this.classHistory = res.records
      this.total = res.total * 1

      this.loading = false
    },

    async loadStatic() {
      const res = await classStatic()
      res.forEach(item => {
        if (item.type === '-1') {
          this.stats.total = item.data
        } else if (item.type === '-2') {
          this.stats.averageScore = item.data
        } else if (item.type === '1') {
          this.stats.cancelled = item.data
        } else if (item.type === '3') {
          this.stats.completed = item.data
        }
      })
    },

    // 处理筛选条件变化
    handleFilterChange(params) {
      this.filterParams = { ...params }
      // 重置到第一页
      this.currentPage = 1
    },

    // 处理分页大小变化
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1 // 重置到第一页
    },

    // 处理当前页变化
    handleCurrentChange(val) {
      this.currentPage = val

      // 滚动到表格顶部
      const tableEl = document.querySelector('.el-table')
      if (tableEl) {
        tableEl.scrollIntoView({ behavior: 'smooth' })
      }

      this.loadClassHistory()
    },

    // 查看详情
    handleViewDetails(classItem) {
      this.selectedClass = { ...classItem }
      this.showDetailDialog = true
    },

    // 关闭对话框
    handleDialogClose() {
      this.showDetailDialog = false
      this.selectedClass = null
    },

    // 导出课程记录
    handleExportClassRecord(classItem) {
      this.$message.success(`已导出《${classItem.courseName}》的课程记录`)
      this.showDetailDialog = false
    }
  }
}
</script>

<style scoped>
.class-history-container {
  padding: 20px;
  margin: 0 auto;
  height: calc(100vh - 85px);
}

.history-filter {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  background-color: #ffffff;
  padding: 10px 5px;
}

/* 统计卡片区域 */
.stats-section {
  margin-bottom: 12px;
}
</style>
